<template>
	<el-select v-model="selectedId" filterable @change="handleChange">
	    <el-option
	      v-for="(item,index) in userList"
	      :key="index"
	      :label="item.realname"
	      :value="item.id"
		  >
	    </el-option>
	</el-select>
</template>
<script lang="ts">
import { defineComponent,onMounted,reactive, ref, toRefs, watch} from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'UserSelect',
    emits: ['userSelected'],
    props: {
        selectedId: String
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            userList:[],
        })
        const loadData = ()=>{
            state.loading = true
			request.get('/system/user/list',{
                params:{
                    pageNum: 1,
					pageSize: 1000,
                    state: 1
                }
            }).then(res => {
				// state.userList = res?.data?.list || []
				state.userList = res?.data?.list || []
 			}).finally(()=>{
				state.loading = false
			})
        }
       
        onMounted(()=>{
            loadData();
        })
        const selectRef = ref();
        const handleChange = (data:any)=>{
			let obj={}
			state.userList.forEach(item=>{
				if (data == item.id){
					obj.id = data;
					obj.label = item.realname;
                    obj.jddm = item.jddm;
                    obj.department = item.department;
				}
			})
            context.emit("userSelected", obj);
        }
        return {
            ...toRefs(state),
            ...toRefs(props),
            handleChange,
            selectRef,
        }
    }
})
</script>
